/*
 * @Author: zs.duan
 * @Date: 2021-08-17 17:15:32
 * @LastEditTime: 2023-03-18 18:00:42
 * @LastEditors: zs.duan
 * @Description: In User Settings Edit
 * @FilePath: \blog_show\src\components\my-user-info\userInfo.js
 */

import React from "react";
import "./userinfo.css";
import defaultImgUrl from "../../static/images/defalut_error_img.png";
import { Image } from "antd";
import { _ } from "../../common/request";

class userInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userInfo: {},
      is_dev: process.env.NODE_ENV === "development",
      devUrl: "https://anran233.com",
    };
  }

  componentDidMount() {
    this.getValue();
  }

  getValue() {
    if (JSON.stringify(this.state.userInfo) !== "{}") {
      return;
    }
    _.getMyUserInfo().then((res) => {
      this.setState({
        userInfo: res.data,
      });
    });
  }

  render() {
    return (
      <div>
        {this.state.userInfo.ID && (
          <div className="user-wrop">
            <div className="icon">
              <Image
                width="100%"
                height="100%"
                src={this.state.userInfo.usericon}
                alt={this.state.userInfo.username}
                fallback={defaultImgUrl}
              ></Image>
            </div>
            <div className="user-name">{this.state.userInfo.username}</div>
            <div className="user-name">{this.state.userInfo.brief}</div>
            <div className="contact">
              <div className="item show-wrop">
                <Image
                  width="100%"
                  height="100%"
                  preview={false}
                  src={this.state.userInfo.yxicon}
                  alt={this.state.userInfo.email}
                  fallback={defaultImgUrl}
                ></Image>
                <div className="show-tips">{this.state.userInfo.email}</div>
              </div>
              <div className="item show-wrop">
                <Image
                  width="100%"
                  height="100%"
                  src={this.state.userInfo.wxicon}
                  alt="微信"
                  preview={false}
                  fallback={defaultImgUrl}
                ></Image>
                <div className="show-tips">
                  <Image
                    width="100%"
                    height="100%"
                    src={this.state.userInfo.wx}
                    alt="微信"
                    preview={false}
                    fallback={defaultImgUrl}
                  ></Image>
                </div>
              </div>
              <div className="item show-wrop">
                <Image
                  width="100%"
                  height="100%"
                  src={this.state.userInfo.addressicon}
                  alt="地址"
                  preview={false}
                  fallback={defaultImgUrl}
                ></Image>

                <div className="show-tips address">
                  {this.state.userInfo.address}
                </div>
              </div>
              <div className="item show-wrop">
                <Image
                  width="100%"
                  height="100%"
                  src={this.state.userInfo.wxAppleticon}
                  alt="小程序"
                  preview={false}
                  fallback={defaultImgUrl}
                ></Image>

                <div className="show-tips address">
                  <Image
                    width="100%"
                    height="100%"
                    src={this.state.userInfo.wxApplet}
                    alt="小程序码"
                    preview={false}
                    fallback={defaultImgUrl}
                  ></Image>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }
}

export default userInfo;
